<template>
  <div class="setOwner">
    <el-dialog
      :visible="visible"
      :close-on-click-modal="false"
      width="600px"
      :modal-append-to-body="false"
      :show-close="false"
    >
      <div slot="title" class="header">
        <div class="left">
          <div class="icon" />
          <div class="title">分配报告分组</div>
        </div>
        <div class="close_icon" @click="close" />
      </div>
      <el-input
        v-model="keyword"
        class="search_input"
        prefix-icon="el-icon-search"
        placeholder="请输入真实姓名进行搜索"
        @input="keywordChange"
        @keyup.enter.native="loadData"
      />
      <el-table
        ref="setOwnerTable"
        v-loading="loading"
        row-key="account"
        :data="keyword ? searchData : dataList"
        style="width: 100%"
        max-height="500px"
        @select="handleSelect"
        @select-all="handleSelectAll"
        @selection-change="setOwner"
      >
        <el-table-column
          reserve-selection
          type="selection"
          width="50"
        />
        <el-table-column
          prop="account"
          label="账户号"
          width="250"
        />
        <el-table-column
          prop="real_name"
          label="真实姓名"
          width="240"
        />
      </el-table>

      <div slot="footer" class="footer">
        <el-button class="btn cancel" plain :loading="loading" @click="close">取消</el-button>
        <el-button class="btn" type="primary" :loading="loading" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { set_group_owner, get_group_owner } from '@/api/report'

export default {
  name: 'SetOwner',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    checkData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    // 这里存放数据
    return {
      loading: false,
      dataList: [],
      keyword: '',
      selectionedList: [],
      searchData: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    visible(n, o) {
      if (n) {
        console.log(this.checkData)
        this.loadData()
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  // 生命周期 - keep-alive
  async activated() {},
  // 方法集合
  methods: {
    async loadData() {
      try {
        this.loading = true
        const { code, data } = await get_group_owner({ keyword: this.keyword })
        if (!code) {
          this.dataList = data
          data.find(item => {
            for (let i = 0; i < this.checkData.group_accounts.length; i++) {
              if (item.account === this.checkData.group_accounts[i].account) {
                this.$refs.setOwnerTable.toggleRowSelection(item, true)
              }
            }
          })
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    keywordChange(keyword) {
      const expandedKeys = this.dataList
        .map((item) => {
          if (item.real_name.indexOf(keyword) > -1) {
            return item
          }
          return null
        })
        .filter((item, i, self) => item && self.indexOf(item) === i)
      this.searchData = expandedKeys
    },
    handleSelect(selection, row) {
      selection.find(item => {
        if (item.account === row.account) {
          this.$refs.setOwnerTable.toggleRowSelection(row, true)
        } else {
          this.$refs.setOwnerTable.toggleRowSelection(row, false)
        }
      })
      this.selectionedList = this.$refs.setOwnerTable.selection
    },
    handleSelectAll(selection) {
      this.selectionedList = selection
    },
    setOwner(val) {
      this.selectionedList = val
    },
    async submit() {
      this.loading = true
      try {
        const { code } = await set_group_owner(this.checkData.id, { account: this.findElement('account', this.selectionedList) })
        if (!code) {
          this.loading = false
          this.$parent.loadData(true)
          this.close()
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    findElement(element, array) {
      const arr = []
      for (let i = 0; i < array.length; i++) {
        const item = array[i]
        arr.push(item[element])
      }
      return arr
    },
    close() {
      this.$refs.setOwnerTable.clearSelection()
      this.$emit('close')
    }
  },
  // 进入页面前
  beforeRouteEnter(to, from, next) {
    next((vm) => {})
  },
  // 离开页面前
  beforeRouteLeave(to, from, next) {
    next()
  }
}
</script>
<style lang="scss" scoped>
.setOwner {
	.header{
		width: 100%;
		display: flex;
		justify-content: space-between;
    align-items: center;
    background: #FAFAFA;
		.left{
			display: flex;
			.icon{
				background: url('../../../assets/report/file_height_light_icon.png');
				@include dialog_head_icons;
			}
			.title{
				font-size: 14px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #000000;
				line-height: 30px;
			}
		}
    .close_icon {
				width:25px;
        height: 24px;
				background: url('../../../assets/close-icon.png');
				background-size: 100%;
        cursor: pointer;
		}
	}
  .footer {
    text-align: center;
    .btn{
      width: 80px;
      height: 30px;
      padding: 7px 20px;
      border-radius: 5px;
    }
    .cancel {
      border: 1px solid #2C2C2C;
      &:hover{
        border: 1px solid #F96A00;
      }
    }
  }
}

::v-deep .search_input {
	margin-bottom: 20px;
}
::v-deep .el-input__inner{
  border-radius: 30px;
	border: 1px solid #E4E4E4;
}

::v-deep .el-dialog__body {
    padding: 25px 30px 10px 30px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}

// ::v-deep .el-input__inner{
//   width: 290px;
// 	border-radius: 4px !important;
//   padding-right: 45px !important;
// }
</style>
